<!-- 首页 -->
<template>
  <div class="classify-list">
    <div
      class="classify-item"
      :class="item.value == props.echoActive ? 'classify-item-current' : ''"
      v-for="item in props.list"
      :key="item.id"
      @click="tabsChange(item)"
    >
      <span>
        {{ item.name }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  echoActive: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["click"]);

const state = reactive({
  goodsList: [],
});

const router = useRouter();

let active = ref();

const tabsChange = (item) => {
  emit("click", item.value);
};
</script>


<style lang="scss" scoped>
.classify-list {
  display: flex;
  align-items: center;

  .classify-item {
    margin-right: 5px;

    span {
      display: block;
      font-size: 15px;
      margin-right: 5px;
      padding: 0 15px;
      line-height: 2;
      border-radius: 40px;
      color: $default-color;
      background: $default-color-l1;
    }
  }

  .classify-item-current {
    span {
      color: #fff;
      background: $default-color;
    }
  }
}
</style>